@import 'max600.css' only screen and (max-width : 600px); 
@import 'min600max850land.css' only screen and (min-width : 601px)  and (max-width: 849px) and (orientation: landscape);
@import 'min600max850port.css' only screen and (min-width : 601px)  and (max-width: 849px) and (orientation: portrait);
@import 'min850pc.css' only screen and (min-width : 850px); 
:root {

    --main-color-gsi01 : hsl(324, 10%, 90%);
    --main-color-gsi02 : hsl(21, 74%, 46%);
    --main-color-gsi03 : hsl(213, 9%, 25%);
    --main-color-gsi04 : hsl(107, 35%, 33%);
    --main-color-gsi05 : hsl(200, 33%, 64%);
    --main-color-gsi06 : hsl(43, 68%, 53%);
    --main-color-gsi07 : hsl(348, 35%, 42%);

    --main-ral2003: hsl(23, 92%, 56%);
    --main-ral2004: hsl(22, 97%, 45%);
    --main-ral7012 : hsl(189, 4%, 35%);
    --main-ral7016 : hsl(204, 8%, 24%);
    --main-ral7021 : hsl(204, 5%, 19%);

    --main-ral9010 : hsl(41, 36%, 91%);
    --main-ral230-80-20: hsl(195, 54%, 75%);
    --main-ral720-1:hsl(200, 5%, 61%);

    --main-color00: hsl(0,0%,0%);
    --main-color01: hsl(220, 7.0%, 16.0%);
    --main-color02: var(--main-ral7016);
    --main-color03: var(--main-ral7012);
    --main-color05: var(--main-ral7012); 

    /* Colore testo toolbars. Mantengo in caso si debba tornare a un colore più "soft" */
    --main-color08: hsl(0, 0%, 100%); 
    --main-color10: hsl(0,0%,100%);
    --main-color20: hsl(120,99%,36%);
    --main-color25: var(--main-ral2004);
    --main-color30: var(--main-ral2004);
    /* --main-color40: var(--main-ral230-80-20); */
    --main-color40: hsl(60, 100%, 50%);
    --main-color50: hsl(200, 100%, 70%);
    --main-color-error: hsl(0, 100%, 50%);
    --main-color-alarm: hsl(0, 100%, 50%);
    --main-color-alarm1: hsl(0, 98%, 40%);
    --main-progress-color1: hsl(200, 100%, 70%);
    --main-progress-color2: hsl(12, 100%, 50%);
    --main-progress-color3: hsl(120, 100%, 50%);
    --main-progress-color5: hsl(0, 0%, 100%);

    --main-cold : hsl(249, 100%, 50%);
    --main-hot  : hsl(0, 100%, 50%);
    --main-time :  hsl(210, 14%, 53%);
    --main-time1 :  hsl(211, 24%, 63%);
    --bd-radius : 2px;
    --slide-feedback:  hsl(60, 100%, 50%);
    /* --menu: hsl(189, 4%, 20%); */
    --main-color21: #00754e;
    --main-color70 : hsl(80, 7%, 76%);

   --main-barcolor : var(--main-ral7012);

}
/* Commentare se il font è esterno */
@font-face {
    font-family: "Quicksand";
    src: url("Quicksand.ttf") format("truetype");
}

* {font-family:'Quicksand',sans-serif;margin:0%;}

html,body{background-color: var(--main-color00);}

a:link, a:visited {text-decoration: none;}
a:hover, a:active {text-decoration: none;}
/* body.waiting * {cursor: progress;} */

/* .marginTopBottom05 {
    margin-top: 5px; 
    margin-bottom: 5px; 
}  */

.mainDiv,.mainBody{position:absolute;background-color:var(--main-color00);}
.mainDiv {
    top: 0px;
    left: 0px;
    width: 100%;
    margin: 0px; 
}
.mainBody {
    color: var(--main-color10); 
    top: 90px;
    left: inherit; 
    width: inherit; 
}
.topBar,.bottomBar{
    position:fixed;
    /* background-color:var(--main-barcolor); */
    left: inherit;
    width: inherit;
    z-index: 1000;
}
.topBar {
    background-image: linear-gradient(var(--main-color05),rgb(0,0,0));
} 
.bottomBar {
    background-image: linear-gradient(rgb(0,0,0), var(--main-color05));
}

.topBar1,.topBar2 {
    position: fixed;
    background-color: var(--main-color00);
    color: var(--main-color08);
    display: inline-grid;
    width: inherit;
    height:20px;
    z-index: 1;
}


.topBarCell {
    display: grid;
    grid-template-columns: 25% auto 25%;
    width: 100%;
    place-items:center;
}
.topBarSubCell {
    display: grid;
    grid-template-columns: 33% auto 33%;
}


.topBar1 {top: 50px;}
.topBar2 {top: 70px;}

.topBar1Cell {
    display: grid;
    grid-template-columns: 15% 33% 25px 30% auto ;
    grid-template-rows: 100%;
    width: 100%; 
}
.topBar2Cell {
    display: grid;
    grid-template-columns: 15% 33% 25px 30% auto ;
    grid-template-rows: 100%;
    width: 100%; 
}

@media screen and (max-width: 600px) {
    /* .topBarCell {
        display: grid;
        grid-template-columns: 20% 55% 8% 15% auto;
        grid-template-rows: 100%;
        width: 100%;
        place-items:center;
    } */
    .topBar1Cell {
        display: grid;
        grid-template-columns: 25% 20% 20px 25% auto ;
        grid-template-rows: 100%;
        width: 100%; 
    }
    .topBar2Cell {
        display: grid;
        grid-template-columns: 25% 20% 20px 25% auto ;
        grid-template-rows: 100%;
        width: 100%; 
    }
   
}
.bottomBar {bottom:0px;}
.bottomBarCell {
    display: grid;
    grid-template-columns: repeat(5, auto);
    /* grid-template-columns: repeat(6, 16%); */
    width: 100%;
    place-items:center;
    /* background-color: var(--main-color05); */
}
img {
    border:none;
    cursor:default;
}
button {
    background-color:transparent;
    border:none;
    cursor:auto;
    padding:0px;
}
.buttonCursor {
    cursor: pointer;
}
.buttonFull {width:inherit;height:inherit;}

.buttonAlertOff {background-color:transparent;}

.buttonAlertOn {
	background-color: var(--main-color-error);
	border: 1px var(--main-color10) solid;
    cursor: pointer;
}

.buttonTile {
    width:98%;
    height:90%
}
@media screen and (max-width: 600px) {
    .buttonTile {
        width:100%;
    }
}


.fullSize {
    width: 100%;
    height: 100%;
}
.border-orange {
    border: 2px solid var(--main-color30)
}




.envButtonCallOnSummer,.envButtonCallOnWinter,.envButtonCallOff {
    width:60px;
    height:30px;
}
.envButtonCallOnSummer {
    color: var(--main-color40);
    border: 1px solid var(--main-color40);
}
.envButtonCallOnWinter {
    color: var(--main-color30);
    border: 1px solid var(--main-color30);
}
.envButtonCallOff {
    color: var(--main-color10);
    border: 1px solid var(--main-color10);
}

.buttonLabelSendRoom {
	background-color: var(--main-color01);
    border: 2px solid var(--main-color01);
	width: 70px;
	height:35px;
	border-radius: 20px;
}

.button_onoff,.button_vmcSummary,.button-t2 { /*.button-t3 { */
    border: 1px solid var(--main-color10); 
}

.push_button {
    /* border: 1px solid var(--main-color25); */
    border: 1px solid var(--main-color00);
}

.push_button1 {
    border-top: 1px solid var(--main-color00);
    border-bottom: 1px solid var(--main-color00);
}

.borderRadius {border-radius : var(--bd-radius);}

.gridAlignItems {display:grid;place-items:center;}
.gridAlignItemsLeftCenter {display:grid;justify-items:left;align-items:center;}
.gridAlignItemsRightCenter {display:grid;justify-items:right;align-items:center;}

.roomsRow {
    display:grid;
}


.roomsRowCell1,.roomsRowCell2,.roomsRowCell3{
    display:grid;
    align-items:center;
}

.opacity036 {opacity:0.36;}
.opacity100 {opacity:1.0;}

.bgcolor00 {background-color: var(--main-color00);}
.bgcolor01 {background-color: var(--main-color01);}
.bgcolor02 {background-color: var(--main-color02);}

.bgcolor03 {background-color: var(--main-color03);}
.bgcolor03_bis,.bgcolor04_bis {
    background-color: var(--main-color03);
}
.bgcolor03_bis:hover {
    background-color: var(--main-color25);
}


.bgcolor25 {background-color: var(--main-color25);}
.bgcolor30 {background-color: var(--main-color25);}
.bgcolor70 {background-color: var(--main-time);}

.bgcolor200 {background-color: var(--main-color02);}
.bgcolor200:hover {background-color: var(--main-color25);}


.fgcolor01 {color:var(--main-color01);}
.fgcolor10 {color:var(--main-color10);}
.fgcolor30 {color:var(--main-color25);}

.titleLabel,.rowPdcMnu,.split_20_60_20 {
    display:grid;
    grid-template-columns: 20% 60% 20%;
}

.input-edit, .input-noedit, .input-error {
    width: 90%;
    text-align: center;
    height: 60%;
    background-color: var(--main-color02);
    padding: 0;
}

.input-edit, .input-error {
    color: var(--main-color10);
    cursor: pointer;
}
.input-edit { 
    border: 1px solid var(--main-color25);
}
.input-noedit {
    border: 1px solid var(--main-color10);
    color: var(--main-color10);
}
.input-error {
    background-color: var(--main-color-error);
    border: 1px solid var(--main-color10);
}
.parentDays {
    display: inline-grid;
    width:100%;
    height:90%;
    align-self: self-start;
    justify-self: center;
}
.parentDays > button {
    border:1px solid var(--main-color00);
    color : var(--main-color10);
    background-color: var(--main-color03);
}
.parentDays > button:hover {
    color : var(--main-color00);
    background-color: var(--main-color25);
}
.btnModDefault, .btnDays {
    background-color: var(--main-color03);
    color : var(--main-color10);
}
.btnModClicked,.btnDaysClicked,.btnModOffSelected {
   background-color: var(--main-color25);
   /* color : var(--main-color01); */
}
.btnModDefault1 {
    background-color: var(--main-color02);
    color : var(--main-color10);
}
.btnModMenu {
    color : var(--main-color10);
    background-color: var(--main-color03);
}
.btnModMenu:hover {
    /* color : var(--main-color00); */
    background-color: var(--main-color25);
}
.btnModMenu02 {
    color : var(--main-color10);
    background-color: var(--main-color02);
}
.btnModMenu02:hover {
    background-color: var(--main-ral7021);
}
.btnModMenu03 {
    color : var(--main-color10);
    background-color: var(--main-color01);
}
.btnModMenu03:hover {
    color : var(--main-color00);
    background-color: var(--main-color25);
}
.button-zone {
    width:50%;
}
.button_onoff,.button-t2 {
    width: 50px;
    height: 50px;
}
.button_vmcSummary,.button-t3 {
    width: 40px;
    height: 40px;
}
.buttonRowbands {
    width:100%;
    height:65%;
}
.roomsIcons {
    grid-template-columns: 25% 25% 25% 25%;
}


/* Css per il layout responsive */
.row:after {
    content: "";
    display: table;
    clear: both;
}
  
.col-50 {
    float: left;
    width: 50%;
    height:100px;
}

.hide600,.reserved {
    display:block;
}
.hide_grid600 {
    display:grid;
}
@media screen and (max-width: 600px) {
    .hide600,.hide_grid600 { display:none; }
}
.gridVmcSummary {
    display: grid;
    grid-template-columns: 45% 50% auto;
}

.gridVmcSummary-A {
    display: grid;
    grid-template-columns: 8% auto;
}
.button-fancoil {
    width:80%;height:50px;
}

@media screen and (max-width: 600px) {
    .col-50 {
      width: 100%;
      height:70px;
      margin-top: 0;
    }
    .hide600,.reserved {
        display:none;
    }
    .gridVmcSummary {
        display: grid;
        grid-template-columns: 40% 45% auto;
    }
    .gridVmcSummary-A {
        display: grid;
        grid-template-columns: 5% auto;
    }
    .button-fancoil {
        width:90%;height:40px;
    }
            
}
  
.overlay,.overlay1 {
    position: fixed;
    z-index: 2;
    cursor:pointer;
    border:1px solid var(--main-color30);
}
.overlay-title {
    border-top-left-radius:3px;
    border-top-right-radius:3px;  
    background-color: var(--main-color25);
    color: var(--main-color10); 
}
.overlay-button {
    width:60px;
    height:85%;
    background-color: var(--main-color25);  
}

/* .center {
    margin: 0;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
} */

/* --- */
.buttonTitle{
    border:1px solid var(--main-ral2003);
}

@keyframes blinking1 {
    0% {
      background-color: var(--main-barcolor);
    }
    /* 49% {
      background-color: var(--main-color05);
    }
    50% {
      background-color: var(--main-color-alarm);
    } */
    100% {
      background-color: var(--main-color-alarm);
    }
}

.blinkAlarm {
    animation: blinking1 1s infinite;
}

.img10px{width:10px;height:auto;}
.img17px{width:17px;height:auto;}
.img20px{width:20px;height:auto;}
.img24px{width:24px;height:auto;}
.img30px {width:30px;height:auto;}
.img35px {width:35px;height:auto;}
.img40px {width:40px;height:auto;}
.img50px {width:50px;height:auto;}
.img70px {width:70px;height:auto;}

.rowHeight10px{height:10px;}
.rowHeight30px{height:30px;}
.rowHeight40px{height:40px;}
.rowHeight50px{height:50px;}
.rowBar50px{height:50px;}
.rowHeight60px{height:60px;}
.rowHeight70px{height:70px;}
.rowHeight80px{height:80px;}
.rowHeight150px{height:150px;}

.parentDays1 {
    width:100%;
    height:100%;
}


.parentDays, .parentDays1,.line_of_4_btns {
    display: inline-grid;
    align-self: center;
    justify-self: center;
}

.parentDays1 > button {
    border:1px solid var(--main-color00);
    color : var(--main-color10);
}

.varFont07 {font-size:0.7rem}
.varFont08 {font-size:0.8rem}
.varFont10 {font-size:1.0rem}
.varFont12 {font-size:1.2rem}
.varFont15 {font-size:1.5rem}
.varFont20 {font-size:2.0rem}
.varFont25 {font-size:2.5rem}

.singleButtonAdaptive {
    width:75%;
    height:90%;
}
@media screen and (max-width: 600px) {
    .img10px {width:10px;height:auto;}
    .img20px {width:16px;height:auto;}
    .img30px {width:25px;height:auto;}
    .img35px {width:30px;height:auto;}
    .img40px {width:35px;height:auto;}
    .img50px {width:50px;height:auto;}
    .img70px {width:70px;height:auto;}
    
    .rowHeight10px{height:10px;}
    .rowHeight30px{height:30px;}
    .rowHeight40px{height:40px;}
    .rowHeight50px{height:50px;}
    .rowBar50px{height:50px;}
    .rowHeight60px{height:60px;}
    .rowHeight70px{height:70px;}
    .rowHeight80px{height:80px;}
    .rowHeight150px{height:150px;}
    
    .varFont08 {font-size:0.6rem}
    .varFont10 {font-size:0.8rem}
    .varFont12 {font-size:1.2rem}
    .varFont15 {font-size:1.5rem}
    .varFont20 {font-size:1.7rem}
    .varFont25 {font-size:2.0rem}

    .singleButtonAdaptive {
        width:95%;
        height:90%;
    }
}

.overexp {
    position: fixed;
    z-index: 900;
    cursor:pointer;
    height:max(60%);
    bottom: -1200px;
    width: 450px;
    background-color: var(--main-barcolor);
    border-top-right-radius: var(--bd-radius);
    border-top-left-radius: var(--bd-radius);
    text-align: center;
    overflow-y: auto;
    padding-top:5px;
}

.mnuButtonAdaptive {
    width:98%;
    height:100%;
}


/* Centered text */
.centnav {
    left: 50%;
    transform: translate(-50%, 0%); 
    transition: bottom 0.6s
}   

@media screen and (max-width: 600px) {
    .overexp {
        width: max(90%,340px);
        height:max(460px);
        bottom:50px
    }
    .centnav {
        left: -50%;
        transform: translate(-50%, 0%); 
        transition: left 0.6s
    }
}

.mnuPlaceholder {opacity:1}

.border_bottom_white,.border_bottom_rowset3
/* ,.border_bottom_10  */
{
    border-bottom: 1px solid var(--main-color10);
}

.border_bottom_orange,.border_bottom_25 {
    border-bottom: 1px solid var(--main-color25);
}
.border_bottom_00 {
    border-bottom: 1px solid var(--main-color00);
}
.border_bottom_03 {
    border-bottom: 1px solid var(--main-color03);
}

ul,menu {
    padding: 0;
    margin: 0;
}

li{list-style-type: none;}

li.row02 {
    background-color: var(--main-color00);
    border-bottom: 1px solid var(--main-color03);
}
li.row02:first-child {
    border-top: 1px solid var(--main-color03);
}
li.row02:hover {
    background-color: var(--main-color02);
}

.bgcolor200 {background-color: var(--main-color02);}
.bgcolor200:hover {background-color: var(--main-color25);}

.gridRowSummary {
    display:grid; 
    grid-template-columns:20% auto;
}

.row-time-slot {
    height:80px;
}
.row-tb-preset-buttons {
    height:60px;
}
.row-tb-save-button,.row-tb-days-button {
    height:50px;
}
.row-tb-days-button {
    background-color: var(--main-color02);
}
@media screen and (max-width: 600px) {
    .row-time-slot {
        height:60px;
    }
    .row-tb-save-button,.row-tb-days-button {
        height:40px;
    }
}

#PageMenu > li, #PageMenu1 > li {
    border-bottom : 1px solid var(--main-color10);
}
#PageMenu > li:last-child, #PageMenu1 > li:last-child {
    border-bottom : 1px solid var(--main-color00);
}
.text-left {text-align: left;}
.text-right {text-align: right;}

.full-size {
    width: 100%;
    height:100%;
}
.dash_button {
    width:99%;
    height:70%

}
@media screen and (max-width: 600px) {
    .dash_button {
        width:99%;
        height:90%
    }
}